<template>
  <view class="custom-section">
    <view class="container" v-for="(item, index) in items" :key="item.path" v-show="!disbalePath.includes(item.path)">
      <uni-section class="section" :title="item.meta.title" type="line" />
      <view class="content">
        <view
          class="content-item"
          v-for="v in item.children"
          :key="v.path"
          v-show="!disbalePath.includes(v.path)"
          @click="handleClick(index, v)"
        >
          <uni-icons type="image" :size="30" color="#777" />
          <view class="text">{{ v.meta.title }}</view>
        </view>
      </view>

      <view class="container container-children" v-show="subItem.index === index && subItem.title">
        <uni-section class="section" :title="subItem.title" type="line">
          <template v-slot:right>
            <button class="text-button" type="primary" plain="true" size="mini" @click="onClosed">收起</button>
          </template>
        </uni-section>
        <view class="content">
          <view
            class="content-item"
            v-for="v in subItem.data"
            :key="v.path"
            v-show="!disbalePath.includes(v.path)"
            @click="handleClick(index, v)"
          >
            <uni-icons type="image" :size="30" color="#777" />
            <view class="text">{{ v.meta.title }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => [],
    },
    disbalePath: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      breadcrumb: [],
      subItem: {
        index: 0,
        title: "",
        data: [],
      },
    };
  },
  mounted() {},

  methods: {
    handleClick(index, values) {
      this.onClosed();
      if (values.children && values.children.length > 0) {
        this.subItem.index = index;
        this.subItem.title = values.meta.title;
        this.subItem.data = values.children;
      } else {
        this.$emit("onItemClick", values);
      }
    },
    onClosed() {
      this.subItem = {
        index: 0,
        title: "",
        data: [],
      };
      this.breadcrumb = [];
    },
  },
};
</script>

<style lang="scss" scoped>
.custom-section {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;

  .container {
    width: 100%;
    border-radius: 8px;
    background-color: #fff;
    &:not(:last-child) {
      margin-bottom: 8px;
    }

    .text-button {
      padding: 0px 4px;
      line-height: unset;
      border: none;
      margin: auto 0px;
    }
  }

  .section {
    background-color: transparent;
  }

  .container-children .section {
    border-bottom: 1px solid #f5f5f5;
    border-top: 1px solid #f5f5f5;
  }

  .content {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 8px;
    padding: 8px;
    box-sizing: border-box;

    .content-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      box-sizing: border-box;
      font-size: 14px;
      padding: 8px;

      &:active {
        background-color: rgba(0, 0, 0, 0.05);
      }
    }
  }
}
</style>
